<template>
  <div class="wrap">
    <div class="header"></div>
    <div class="main">
       <router-view></router-view>
    </div>
    <div class="footer">
      <router-link to='/home/pei'>配送到家</router-link>
      <router-link to='/home/classfin'>分类</router-link>
      <router-link to='/home/hui'>会员</router-link>
      <router-link to='/home/car'>购物车</router-link>
      <router-link to='/home/my'>我的</router-link>
    </div>
   
   
  </div>
</template>

<script>
// import <组件名称> from '<组件路径>'

  export default {
    name: 'Home',
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {}
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {},
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang='scss'>
  //@import url(); 引入公共css类
  *{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
  }
  html,body,#app{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .wrap{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    // overflow: hidden;
  }
  .main{
    width: 100%;
    height: 100%;
    flex: 1;
    overflow-y: scroll;
    // overflow-y: scroll;
  }
  .footer{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background:#f5f5f5;
   .router-link-active{
     color: orange;
   }
  }
</style>
